<script setup lang="ts">
import { computed, ref, watch } from 'vue';

interface Fruit {
  id: number;
  icon: string;
  isChecked: boolean;
  num: number;
  price: number;
}

// 水果列表
const fruitList = ref<Fruit[]>([
  {
    id: 1,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/ll.png',
    isChecked: true,
    num: 2,
    price: 6,
  },
  {
    id: 2,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/smt.png',
    isChecked: false,
    num: 7,
    price: 20,
  },
  {
    id: 3,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/tg.png',
    isChecked: false,
    num: 3,
    price: 40,
  },
  {
    id: 4,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/xg.png',
    isChecked: false,
    num: 10,
    price: 3,
  },
  {
    id: 5,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/yl.png',
    isChecked: false,
    num: 20,
    price: 34,
  }
])

const totalCount = computed(() => {
  return fruitList.value.filter(item => item.isChecked).length
})

const totalPrice = computed(() => {
  return fruitList.value.filter(item => item.isChecked).reduce((sum, item) => sum + item.price * item.num, 0)
})

const allSelected = computed(() => {
  return fruitList.value.every(item => item.isChecked)
})

const btnAddClick = (id: number) => {
  fruitList.value.forEach(item => {
    if (item.id === id) {
      if (item.num > 1)
        item.num++
      return
    }
  })
}
const btnReduceClick = (id: number) => {
  fruitList.value.forEach(item => {
    if (item.id === id) {
      item.num--
      return
    }
  })
}

const delClick = (id: number) => {
  fruitList.value = fruitList.value.filter(item => item.id !== id)
}

const allSelect = (selected: boolean) => {
  fruitList.value.forEach(item => item.isChecked = !selected)
}

watch(() => fruitList, (newValue) => {
  localStorage.setItem('fruitList', JSON.stringify(newValue.value))
  console.log(JSON.parse(localStorage.getItem('fruitList')!.toString()) as Fruit)
}, { deep: true })

</script>
<template>
  <div class="column">
    <div class="column main">
      <!-- banner图 -->
      <img class="banner" src="https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/sg_top.png" alt="">
      <!-- 面包屑 -->
      <div class="row cart-breadcrumb">
        <span>🏠</span>/<a href="#">购物车</a>
      </div>
      <!-- 购物车列表 -->
      <div class="column cart-list">
        <!-- 头部 -->
        <div class="row cart-header">
          <div class="cart-title" v-for="item in ['选中', '图片', '单价', '个数', '小计', '操作']" :key="item">{{ item }}</div>
        </div>
        <!-- 列表项 -->
        <div class="row cart-item" v-for="item in fruitList" :key="item.id">
          <div class="row"><input class="cart-checkbox" v-model="item.isChecked" type="checkbox"></div>
          <div class="row"><img class="cart-img" :src="item.icon"></img></div>
          <div class="row">{{ item.price }}</div>
          <div class="row">
            <button class="cart-count" @click="btnReduceClick(item.id)" :disabled="item.num == 1">-</button>
            <label class="column cart-count-number">{{ item.num }}</label>
            <button class="cart-count" @click="btnAddClick(item.id)">+</button>
          </div>
          <div class="row">{{ item.price * item.num }}</div>
          <div class="row"><button class="del-btn" @click="delClick(item.id)">删除</button></div>
        </div>
        <!-- 底部 -->
        <div class="row cart-footer">
          <div class="row cart-footer-allSelect">
            <input type="checkbox" v-model="allSelected" @click="allSelect(allSelected)">全选
          </div>
          <div class=" row cart-footer-totalPrice">总价：￥<span>{{ totalPrice }}</span></div>
          <button class="cart-footer-settlement">结算( {{ totalCount }} )</button>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.column {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main {
  width: 100vw;
  max-width: 1200px;
  min-width: 800px;
}

.banner {
  width: 100%;
  max-width: 1200px;
}

.cart-breadcrumb {
  column-gap: 5px;
  color: grey;
  justify-content: start;
  width: 100%;
  padding-left: 2vw;
  padding-right: 2vw;
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 14px;
}

.cart-breadcrumb a {
  color: black;
  text-decoration: none;
}

.cart-list {
  width: 100%;
  padding: 5px 15px;
}

.cart-header {
  width: 100%;
  height: 50px;
  border: 1px solid #ccc;
  justify-content: space-around;
}

.cart-title {
  background-color: #fafafa;
}

.cart-item {
  width: 100%;
  height: 130px;
  justify-content: space-around;
  border: 1px solid #ccc;
  border-top: none;
}

.cart-item div {
  width: 100%;
  height: 100%;
  justify-content: center;
}

.cart-item .cart-checkbox {
  width: 16px;
  height: 16PX;
}

.cart-item .cart-img {
  height: 80%;
}

.cart-item .del-btn {
  width: 60px;
  height: 32px;
  border: none;
  background-color: #d9363e;
  color: white;
}

.cart-count {
  width: 35px;
  height: 35px;
}

.cart-count-number {
  width: 48px;
  height: 35px;
  justify-content: center;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

.cart-footer {
  width: 100%;
  height: 50px;
  border: 1px solid #ccc;
  border-top: none;
  column-gap: 20px;
}

.cart-footer-allSelect {
  flex: 1;
  height: 100%;
}

.cart-footer-allSelect input {
  width: 16px;
  height: 16PX;
  margin-left: 4vw;
  margin-right: 10px;
}

.cart-footer-totalPrice span {
  color: #ff68b4;
  font-weight: 900;
  font-size: 30px;
}

.cart-footer-settlement {
  border: none;
  color: white;
  background-color: #3f85ed;
  width: 80px;
  height: 30px;
  margin-right: 20px;
}
</style>